<template>
  <div :class="[classstr]" :style="stylestr">
    <!--树结构内容-->
    <div class="second-menu-block tree-box whiteBG">
      <div class="el-menu-vertical" >
        <el-input class="input-with-select" size="medium" placeholder="请输入ID/名称关键字" @input="textChange" v-model="filterText" clearable>
          <el-button class="input-with-select-btn" slot="append" icon="el-icon-search" :loading="treeLoading" @click="toFilterTree()"></el-button>
        </el-input>
        <ul :id="treeId" class="ztree filter-tree nobtn" v-loading="defaultTreeLoading"></ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.second-menu .tree-box{
  >>>.filter-tree.ztree{
    padding-left: 10px;
    &.nobtn{
      height: calc(100% - 40px);
    }
    *{
      font-size: 14px;
      font-family: inherit;
    }
    li span.treeIconChannel1_ico_docu,li span.button.treeIconChannel1_ico_open,li span.button.treeIconChannel1_ico_close{
      background: url(/static/image/tree-channel1.png) 0 0 no-repeat;
      background-size: contain;
      margin-right: 3px;
    }
    li span.button.treeIconChannel2_ico_docu,li span.button.treeIconChannel2_ico_open,li span.button.treeIconChannel2_ico_close{
      background: url(/static/image/tree-channel2.png) 0 0 no-repeat;
      background-size: contain;
      margin-right: 3px;
    }
    li span.button.treeIconDevice_ico_docu,li span.button.treeIconDevice_ico_open,li span.button.treeIconDevice_ico_close{
      background: url(/static/image/tree-video.png) 0 0 no-repeat;
      background-size: contain;
      margin-right: 3px;
      background-position: 0px 2px;
    }
  }
  &.whiteBG{
    >>>.el-menu-vertical{
      background: #fff;
      .filter-tree{
        background: #fff;
      }
      .input-with-select .el-input__inner{
        border-color: #DCDFE6;
        color: #666;
      }
    }
  }
}
</style>
<script>
export default {
  name: "dept-car-tree-mult-pm",
  props:{
    classstr: "",
    stylestr: {
      type: Object,
      default: ()=>{
        return {}
      }
    },
  },
  data() {
    return {
      treeId: 'tree-left'+this.randomStr(8),
      filterText: '',//树结构过滤关键字
      treeData: [],//树结构数据
      defaultTreeLoading: true,
      treeLoading: false,
      setting: {
        view: {
          expandSpeed: "",
          fontCss : {"color":"#333"}
        },
        data: {
          key: {
            name: "name"
          },
          simpleData: {
            enable: true,
            idKey: "nodeId",
            pIdKey: "parentId",
            rootPId: ""
          }
        },
        callback: {
          onClick: this.zTreeOnClick
        },
      },
      treeChecking: false,
      treeObj: null,
    }
  },
  mounted(){
    this.initData();
  },
  methods: {
    initData(){
      let that = this;
      if(that.$store.state.commentData.deptCarList&&that.$store.state.commentData.deptCarList.length>0){
        that.treeData = JSON.parse(JSON.stringify(that.$store.state.commentData.deptCarList));
        let list = [];
        function loop(arr){
          for (let i = 0; i < arr.length; i++) {
            let item = JSON.parse(JSON.stringify(arr[i]));
            delete item.children;
            item.isHidden = false;
            item.checked = false;
            list.push(item);
            if(arr[i].children&&arr[i].children.length>0){
              loop(arr[i].children);
            }
          }
        }
        loop(that.treeData);
        that.treeData = list;//是一个数组
        // console.log(JSON.parse(JSON.stringify(that.treeData)));
        that.treeObj = $.fn.zTree.init($("#"+that.treeId), that.setting, that.treeData);
        that.defaultTreeLoading = false;
        that.treeObj.expandAll(true);
      }else{
        setTimeout(function(){
          that.initData();
        },1500);
      }
    },
    textChange(val){//当输入框从有值变化成空时触发
      if(!this.filterText){
        this.toFilterTree();
      }
    },
    getTreeData(){
      let treeList = [];//符合树搜索条件的机构车辆
      if(!this.filterText){
        this.treeData.forEach((item,index)=>{
          if(index>0){
            item.open = false;
          }else{
            item.open = true;
          }
        });
        treeList = this.treeData;
      }else{//有关键字
        let groupids = [];
        for (let i = 0; i < this.treeData.length; i++) {
          if(!!this.treeData[i].nodetype&&(this.treeData[i].id.indexOf(this.filterText)>-1||this.treeData[i].name.indexOf(this.filterText)>-1)){//有机构/设备符合条件
            groupids.push(this.treeData[i].nodeId);
            treeList.push(this.treeData[i]);
          }
        }
        if(!groupids.length){//查询是否有符合条件的通道
          for (let i = 0; i < this.treeData.length; i++) {
            if(!this.treeData[i].nodetype&&(this.treeData[i].id.indexOf(this.filterText)>-1||this.treeData[i].name.indexOf(this.filterText)>-1)){//有通道符合条件
              treeList.push(this.treeData[i]);
              if(groupids.indexOf(this.treeData[i].parentId)==-1){
                groupids.push(this.treeData[i].parentId);//把直属父级记录下来
              }
            }
          }
          for (let i = 0; i < this.treeData.length; i++) {
            let d_idx = groupids.indexOf(this.treeData[i].nodeId);
            if(d_idx>-1){
              this.treeData[i].open = true;
              treeList.unshift(this.treeData[i]);
            }
          }
        }else{//有符合条件，这些设备旗下的通道要全部显示
          for (let i = 0; i < this.treeData.length; i++) {
            if(groupids.indexOf(this.treeData[i].parentId)>-1){
              treeList.push(this.treeData[i]);
            }
          }
        }
      }
      let that = this;
      that.treeObj = $.fn.zTree.init($("#"+that.treeId), that.setting, treeList);
      that.treeObj.expandAll(true);
      that.treeLoading = false;
    },
    toFilterTree(){//点击搜索筛选树数据--选中状态保留
      this.treeLoading = true;
      this.getTreeData();
    },
    zTreeOnClick(event, treeId, treeNode) {
      if(!treeNode.nodetype){//通道
        this.$emit('selectCange',treeNode,"click");
      }
    },
    initTree(){//初始化树--选中状态去掉
      this.treeData.forEach((item,index)=>{
        if(index>0){
          item.open = false;
        }else{
          item.open = true;
        }
        item.checked = false;
      });
      this.treeObj = $.fn.zTree.init($("#"+this.treeId), this.setting, this.treeData);
    },
    clearTree(){//清空选中
      this.treeObj.checkAllNodes(false);
    }
  }
};
</script>
